$border-radius-degrees: (0, 4, 6, 15, 30) !default;

@each $degree in $border-radius-degrees {
  .btn-#{$degree} {
    border-radius: #{$degree}px;
  }
}

.btn {
  line-height: 1.3em;
  //padding: .5rem 1.15rem;
  letter-spacing: 1px;

  &.btn-rounded {
    border-radius: 30px;
  }

  &.btn-ghost {
    @extend .btn-outline-light;
    border-color: #f5f5f5;
    color: #B3B3B3;
  }

  &.btn-transparent {
    @extend .btn-outline-light;
    border-color: transparent;
    color: #B3B3B3;
  }

  &.btn-icon {
    @extend .btn-rounded;
    height: 2em;
    width: 2em;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0.125em 0;

    &.no-border {
      border-color: transparent;
    }
  }
}
